<!--
 * @Date: 2024-05-07 10:11:22
 * @LastEditors: 王帅 1677191300@qq.com
 * @LastEditTime: 2024-06-27 10:16:28
 * @FilePath: \pcVue3\src\components\echart\echart.vue
 * @Description: 
-->
<template>
    <div class="echartBox" :id="randomString + id" :style="{ width: width + 'px', height: height + 'px' }">

    </div>
</template>
<script lang='ts' setup>
import { getRandomString } from "@/utils/index"
import { onMounted, ref, watch, withDefaults, defineProps } from "vue";
import * as echarts from 'echarts';
const randomString = ref(getRandomString())
interface iconType {
    id: string;
    width?: number;
    height?: number;
    option: any
}
const props = withDefaults(defineProps<iconType>(), {
    width: 0,
    height: 0,
})
watch([() => props.width, () => props.height, () => props.option], () => {
    initEchart()
})
let myChart:any;
let time:any;
function initEchart() {
    clearTimeout(time)
    if(myChart){
        myChart.clear();
    }
    time = setTimeout(() => {
        if (!myChart) {
            let id = randomString.value + props.id
            let dom = document.getElementById(id)
            if (!dom) {
                return
            }
            myChart = echarts.init(dom);
        }
        // 绘制图表
        if (props.option) {
            myChart.resize();
            myChart.setOption(props.option);
        }
    }, 200);

}

</script>
<style lang="scss" scoped>
.echartBox {
    background-color: aliceblue;
}
</style>